<template>
  <div id="login">
    <!-- 背景图 -->
    <div class="login_main">
      <!-- 插图 -->
      <svg
        class="login_img2"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="433"
        height="433"
        viewBox="0 0 433 433"
        fill="none"
      >
        <path
          id="圆形 1"
          fill-rule="evenodd"
          fill="url(#linear_0)"
          opacity="1"
          d="M216.5 0C96.93 0 0 96.93 0 216.5C0 336.07 96.93 433 216.5 433C336.07 433 433 336.07 433 216.5C433 96.93 336.07 0 216.5 0Z"
        ></path>
        <defs>
          <linearGradient
            id="linear_0"
            x1="0%"
            y1="50%"
            x2="100%"
            y2="50%"
            gradientUnits="objectBoundingBox"
          >
            <stop offset="0" stop-color="#ABF78D" stop-opacity="1" />
            <stop offset="1" stop-color="#90F0E1" stop-opacity="1" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        class="login_img1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="1173"
        height="872"
        viewBox="0 0 1173 872"
        fill="none"
      >
        <path
          id="路径 1"
          fill-rule="evenodd"
          fill="url(#linear_0)"
          opacity="1"
          d="M619,0.5c-1.5,1 0,0 0,0zM0,848c51.45,-112.05 160.74,-340.04 316.5,-453.5c324,-236 302.5,-394 302.5,-394l539.5,-0.5l14.5,872h-1169z"
        ></path>
        <defs>
          <linearGradient
            id="linear_0"
            x1="50.17050298380221%"
            y1="100%"
            x2="51.17050298380221%"
            y2="0%"
            gradientUnits="objectBoundingBox"
          >
            <stop offset="0.0139" stop-color="#4FE3B7" stop-opacity="1" />
            <stop offset="1" stop-color="#9DF57A" stop-opacity="1" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        class="login_img3"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="720"
        height="720"
        viewBox="0 0 720 720"
        fill="none"
      >
        <path
          id="圆形 1"
          fill-rule="evenodd"
          fill="url(#linear_0)"
          opacity="1"
          d="M360 0C161.18 0 0 161.18 0 360C0 558.82 161.18 720 360 720C558.82 720 720 558.82 720 360C720 161.18 558.82 0 360 0Z"
        ></path>
        <defs>
          <linearGradient
            id="linear_0"
            x1="34.099000000000004%"
            y1="11.878%"
            x2="58.813%"
            y2="84.29100000000001%"
            gradientUnits="objectBoundingBox"
          >
            <stop offset="0" stop-color="#61E8AB" stop-opacity="1" />
            <stop offset="1" stop-color="#5FE8D1" stop-opacity="1" />
          </linearGradient>
        </defs>
      </svg>
      <img :src="$imageUrl +2836" alt="" class="login_img4" />
      <!-- logo -->
      <p class="login_title">欢迎登录在线医疗管理系统</p>
      <!-- 账号密码登录 -->
      <div class="login_content">
        <p class="login_t1">登录</p>
        <el-form ref="userRuleForm" :model="userForm" :rules="userRuleForm">
          <p class="login_t2">请输入账号</p>
          <!-- 账号输入框 -->
          <el-form-item prop="loginName">
            <el-input
              prefix-icon="el-icon-user"
              v-model="userForm.loginName"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <p class="login_t2">请输入密码</p>
          <!-- 密码输入框发 -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="userForm.password"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item style="text-align: left">
            <button
              type="button"
              class="register_button"
              @click="loginByLoginName('userRuleForm')"
            >
              立即登录
            </button>
          </el-form-item>
        </el-form>
        <p class="login_t3" @click="missPass()">忘记密码?</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 校验登录名字中文
    const checkName = (rule, value, callback) => {
      this.userForm.nickName = value.replace(/[\u4E00-\u9FA5]/g, '')
      if (this.userForm.nickName == '') {
        callback(new Error('账号不允许输入中文'))
      } else {
        callback()
      }
    }
    return {
      // 用户对象
      userForm: {
        // 用户登录名
        loginName: '',
        // 密码
        password: ''
      },
      // 校验规则
      userRuleForm: {
        // 校验登录名称
        loginName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { validator: checkName, trigger: 'change' }
        ],
        // 检验登录密码
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 忘记密码弹窗
    missPass () {
      this.$message.warning('请联系管理员:')
    },
    // 账号密码登录
    loginByLoginName (userRuleForm) {
      this.$refs[userRuleForm].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/sysUser/login',
            data: {
              username: this.userForm.loginName,
              password: this.userForm.password
            },
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            if (res.data.flag == true) {
              window.sessionStorage.setItem('token', res.data.data.token)
              window.sessionStorage.setItem('userId', res.data.data.userId)
              window.sessionStorage.setItem(
                'loginName',
                res.data.data.loginName
              )
              window.sessionStorage.setItem(
                'avatarUrl',
                res.data.data.avatarUrl
              )
               window.sessionStorage.setItem(
                'user',
                JSON.stringify(res.data.data) 
              )
              this.$store.commit('setUser',res.data.data)
              this.$router.push('/home')
            } else{
              this.$message.warning('密码错误')
            } 
          })
        }
      })
    },
    login () {
      getMenu().then((res) => {
        if (res.code === 200) {
          const menuRouter = fnAddDynamicMenuRoutes(filterMenu(res.data))
          this.$store.dispatch('dynamicRoutes', menuRouter).then(() => {
            this.$store.state.dynamicRoutes.forEach((element) => {
              this.$router.addRoute('home', element)
            })
            sessionStorage.setItem('token', 'token')
            if (typeof this.$route.query.redirect !== 'undefined') {
              this.$router.push(this.$route.query.redirect)
            } else {
              this.$router.push('/home')
            }
          })
        } else {
          next({ path: '/login' })
        }
      })
    },
    // 消息提示框
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>

<style scoped>
#login {
  width: 100%;
  height: 100%;
  opacity: 1;
  background: linear-gradient(
    124.3deg,
    rgba(147, 230, 177, 1) 0%,
    rgba(138, 230, 219, 1) 100%
  );
  position: relative;
}
.login_main {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  opacity: 1;
  border-radius: 50px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 50px rgba(73, 204, 176, 1);
  overflow: hidden;
}
.login_img1 {
  height: 105%;
  width: auto;
  position: absolute;
  top: -10px;
  right: -150px;
}
.login_img2 {
  height: 40%;
  width: auto;
  position: absolute;
  top: -15%;
  right: -127px;
  z-index: 1;
}
.login_img3 {
  height: 80%;
  width: auto;
  position: absolute;
  bottom: -55%;
  left: 690px;
}
.login_img4 {
  width: 32%;
  height: auto;
  position: absolute;
  top: 18%;
  left: 690px;
}

.login_logoImage {
  height: 90px;
}
.login_title {
  margin-top: 130px;
  margin-left: 70px;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 52.13px;
  color: rgba(33, 196, 145, 1);
  text-align: left;
  vertical-align: top;
}
.login_t1 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 34.75px;
  color: rgba(26, 26, 26, 1);
  text-align: left;
  margin-bottom: 20px;
}
.login_t2 {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  text-align: left;
  color: rgba(26, 26, 26, 1);
}
.login_content {
  z-index: 2;
  position: relative;
  width: 30%;
  height: 230px;
  margin-left: 70px;
  margin-top: 60px;
  text-align: center;
}
.register_button {
  cursor: pointer;
  border-radius: 10px;
  background: rgba(33, 196, 145, 1);
  width: 155px;
  height: 40px;
  border: 0;
  margin-left: 0;
  color: #ffffff;
}
.login_t3 {
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: left;
  margin-top: -6px;
}
/**input**/
/deep/ input:-internal-autofill-previewed,
/deep/ input:-internal-autofill-selected {
  -webkit-text-fill-color: #807c7c;
  transition: background-color 5000s ease-out 0.5s;
}
/deep/ .el-input.is-active .el-input__inner,
/deep/ .el-input__inner:focus {
  border-color: #03b385;
  outline: 0;
}
</style>
